<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>

<body>
  <h1>取消请求</h1>
  <input type="text" id="ipt">
  <button id="btn">提交</button>
  <button id="cancel">取消请求</button>

  <script>
    const myAxios2 = axios.create({
      baseURL: '/',
      timeout: 10000,
      headers: {}
    })
    const CancelToken1 = axios.CancelToken
    const oBtn2 = document.getElementById('btn')
    const cancel2 = document.getElementById('cancel')
    const oIpt2 = document.getElementById('ipt')
    let cancel = null
    myAxios2.interceptors.request.use((cp)=>{
      const token = 'adfqafaefa'
      cp.headers.token = token
      return cp
    },()=>{})
    oBtn2.onclick = async function(){
      const iptValue2 = oIpt2.value
      try {
        const re = await myAxios2.get('/userLazy',{
          params: {
            userId: iptValue2
          },
          cancelToken: new CancelToken1((c)=>{
            cancel = c
          })
        })
        console.log(re);
      } catch (e) {
        console.log(e.message);
      }    
    }
    cancel2.onclick = function(){
      cancel()
      console.log('取消');
    }
  //   const myAxios1 = axios.create({
  //     baseURL: '/',
  //     timeout: 10000,
  //     headers: {}
  //   })
  //   myAxios1.interceptors.request.use((cp)=>{
  //     const token = 'adfqafaefa'
  //     cp.headers.token = token
  //     return cp
  //   },()=>{})
  //   const oIpt1 = document.getElementById('ipt')
  //   const oBtn1 = document.getElementById('btn')
  //   const oCancel1 = document.getElementById('cancel')
  //   const CancelToken = axios.CancelToken
  //   let cancel1 = null;
  //   oBtn1.onclick = async function(){
  //     const iptValue1 = oIpt1.value
  //     try {
  //       const re1 = await myAxios1.get('/userLazy',{
  //         params: {
  //           userId: iptValue1
  //         },
  //         cancelToken: new CancelToken((c)=>{
  //           cancel1 = c
  //         })
  //       })
  //       console.log(re1.data);
  //     } catch (e) {
  //       console.log(e.message);
  //     }
      
  //   }
  // oCancel1.onclick = function(){
  //   cancel1()
  // }
    // const myAxios = axios.create({
    //   baseURL: "/",
    //   timeout: 10000,
    //   headers: {}
    // })


    // const oIpt = document.getElementById('ipt')
    // const oBtn = document.getElementById('btn');
    // const oCancel = document.getElementById('cancel');

    // //拿到一个取消请求的对象(是一个构造函数)
    // const CancelToken = axios.CancelToken;
    // let cancel = null;
    // oBtn.onclick = async function () {
    //   const iptValue = oIpt.value;
    //   try {
    //     const result = await myAxios.get("/userLazy", {
    //       params: {
    //         userId: iptValue,
    //       },
    //       //在配置对象中配置一个cancelToken的配置项,值是实例化的CancelToken对象
    //       cancelToken: new CancelToken((c) => {
    //         //当请求发送的时候,这个回调函数会被执行,并接受一个参数,这个参数其实就是取消当前请求的函数
    //         console.log(c);
    //         cancel = c;
    //         //一旦请求被中断,则会交给catch处理这个异常
    //       })
    //     })
    //     console.log(result);
    //   } catch (e) {
    //     console.log(e.message, "出现错误");
    //   }
    // }

    // //取消请求点击事件
    // oCancel.onclick = function () {
    //   cancel()
    // }
  </script>
</body>

</html>